<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>3D广告箱效果</title>
	<style type="text/css">
		body {
			background-color: #494A5F;
			padding-top: 0.1px;
		}
		/*盛放广告墙的容器*/
		#wrap {
			margin-top: 80px;
			overflow: hidden;
			/*定义 3D 元素距视图的距离*/
			perspective: 800px;
		}
		/*左右广告墙的相同样式*/
		#wrap div {
			float: left;
			width: 480px;
			height: 150px;
			font-size: 100px;
			overflow: hidden;
		}
		/*左边广告墙*/
		#left {
			background-color: #e5233e;
			color: #fff;
			transform-origin: right;
			transform: rotateY(-45deg);
		}
		/*右边广告墙*/
		#right {
			background-color: #b31e31;
			color: #f8c9d9;
			transform-origin: left;
			transform: rotateY(45deg);
		}
		/*左右广告墙上的内容标签*/
		#left>span ,#right>span {
			display: block;
			white-space: nowrap;
		}
		/*定义动画*/
		@keyframes leftcrawl {
			from{
				transform: translateX(960px);
			}
			to{
				transform: translateX(-1600px);
			}
		}
		@keyframes rightcrawl {
			from {
				transform: translateX(480px);
			}
			to{
				transform: translateX(-2080px);
			}
		}
		
		
		form {
			background-color: #334;
			text-align: center;
			color: #fff;
			margin-top: 50px;
			padding: 16px;
		}
		#info {
			width: 350px;
			font-size: 18px;
			padding: 8px;
		}
	</style>
	<script type="text/javascript">
		window.onload = function () {
			// 当页面加载完毕，给span标签添加文字并执行动画
			setText();
			
			// 获取按钮并绑定点击事件
			var btn = document.querySelector('#btn');
			
			btn.onclick = setText;
			
		}
			
		function setText() {
			// 获取输入框值、左右span标签、
			var info = document.querySelector('#info').value;
			var leftspan = document.querySelector('#left span');
			var rightspan = document.querySelector('#right span');
			
			// 把获取到的输入框值写入左右标签
			rightspan.innerText = leftspan.innerText = info;
			// 给左右span标签应用动画
			leftspan.style = "animation: leftcrawl 14s linear infinite;";
			rightspan.style = "animation: rightcrawl 14s linear infinite;";
		}
	</script>
</head>
<body>
	<div id="wrap">
		<div id="left"><span></span></div>
		<div id="right"><span></span></div>
	</div>
	<form>
		输入要展示的广告：
		<input type="text" id="info" value="这是一条广告" />
		<input type="button" id="btn" value="应用"/>
	</form>
</body>
</html>